<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	  <title>GRAPE App Landing Template by Codepassenger</title>
    <meta name="description" content="GRAPE App landing Page by Codepassenger">
    <meta name="author" content="Codepassenger">
	
	  <!-- Mobile Specific Meta -->	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- Font awesome -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">

    <!-- Animate.css -->
    <link rel="stylesheet" href="assets/css/animate.css">

    <!-- Owl-carousel style -->
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/owl.theme.css">

    <!-- magnific style -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">

    <!-- Custom stylesheet-->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css" media="screen">

    <!-- Added google font -->
    <link href='http://fonts.googleapis.com/css?family=Dosis:400,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>

    <!--Fav and touch icons-->
    <link rel="shortcut icon" href="assets/images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="assets/images/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/images/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/images/icons/apple-touch-icon-114x114.png">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- Preloader -->
      <div id="faceoff">
        <div id="preloader"></div>
        <div class="preloader-section"></div>
      </div>
    <!-- Preloader end -->
   
    <!-- header start -->
    <header id="home" class="navbar-fixed-top">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <h1><a class="nav-brand" href=""> <img src="assets/images/logo.png" alt="gigninga"></a></h1>
              </div>
            </div>
            <div class="col-sm-7">
              <!-- Collect the nav toggling -->
              <div class="collapse navbar-collapse navbar-example" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li><a href="#intro">Intro</a></li>
                  <li><a href="#feature">Feature</a></li>
                  <li><a href="#description">Description</a></li>
                  <li><a href="#screenshot">Screenshots</a></li>
                  <li><a href="#download">Download</a></li>
                  <li><a href="#contact">Contact</a></li>
                </ul>             
              </div><!-- /.navbar-collapse -->
            </div>
            <div class="col-sm-2 mob-right">
              <ul class="app pull-right">
                <li><a href=""><i class="fa fa-apple"></i></a></li>
                <li><a href=""><i class="fa fa-android"></i></a></li>
                <li><a href=""><i class="fa fa-windows"></i></a></li>
              </ul>
            </div>
          </div>
        </div><!-- /.container -->
      </nav>
    </header>
    <!-- header end -->

    <!-- banner start -->
    <section id="banner" class="banner norm-img">
      <div class="trans-bg">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-12">
                  <h2><a href="" class="lg-logo">GRAPE</a></h2> <!-- .lg-logo -->
                 <!-- Text slider start here -->
                 <div class="flex_text text-slider">
                  <ul class="slides">
                      <li>Present your beautiful app with GRAPE</li>
                      <li>Not only app landing you can use GRAPE as business template</li>
                      <li>You can find hundreds but ultimately you love us</li>
                  </ul>
                </div>
                <!--/.text-slider end-->                                  
                  <ul class="app">
                    <li><a href=""><i class="fa fa-apple"></i></a></li>
                    <li><a href=""><i class="fa fa-android"></i></a></li>
                    <li><a href=""><i class="fa fa-windows"></i></a></li>
                  </ul>
                  <div class="download-block text-center">
                   <a href="" class="btn-download">Download</a><a href="" class="btn-download">Take a tour</a>
                 </div>             
            </div>
          </div>
        </div> 
      </div><!-- /.trans-bg -->
    </section>
    <!-- banner end -->

    <!-- intro start -->
    <section id="intro" class="intro white">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <span class="sub-head wow fadeInLeft">present your</span>
            <div class="title wow fadeInRight">
              <h2>awesome app</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".1s">
              <i class="fa fa-bolt"></i>
              <h3>quick & efficiency</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>            
          </div>
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".2s">
              <i class="fa fa-life-ring"></i>
              <h3>any time support</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>            
          </div>
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".3s">
              <i class="fa fa-paint-brush"></i>
              <h3>unique design</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".4s">
              <i class="fa fa-angellist"></i>
              <h3>corporate branding</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".5s">
              <i class="fa fa-thumbs-o-up"></i>
              <h3>best in qulality</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="app-block wow bounceInUp" data-wow-delay=".6s">
              <i class="fa fa-puzzle-piece"></i>
              <h3>idea making</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>            
          </div>
        </div>
      </div>
    </section>
    <!-- intro end -->

    <!-- feature start -->
    <section id="feature" class="feature solid-bg"> 
        <div class="container">
          <div class="row">
            <div class="col-sm-12 text-center">
              <h2 class="wow swing" data-wow-delay=".1s">crazy feature</h2>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <ul class="feature-list-left">
                <li>
                  <div class="feature-detail wow fadeInLeft" data-wow-delay=".4s">
                    <h4>Custom scrollbars</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>                          
                  <div class="feature-icon wow fadeInLeft" data-wow-delay=".3s">
                    <i class="fa fa-exchange"></i>
                  </div>
                </li>
                <li>
                  <div class="feature-detail wow fadeInLeft" data-wow-delay=".4s">
                    <h4>Robust demo package</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                  <div class="feature-icon wow fadeInLeft" data-wow-delay=".3s">
                    <i class="fa fa-star-half-o"></i>
                  </div>                  
                </li>
                <li>
                  <div class="feature-detail wow fadeInLeft" data-wow-delay=".4s">
                    <h4>Responsive support</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                  <div class="feature-icon wow fadeInLeft" data-wow-delay=".3s">
                    <i class="fa fa-arrows-alt"></i>
                  </div>                  
                </li>
                <li>                  
                  <div class="feature-detail wow fadeInLeft" data-wow-delay=".4s">
                    <h4>Tons of API callbacks</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                  <div class="feature-icon wow fadeInLeft" data-wow-delay=".3s">
                    <i class="fa fa-cog"></i>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-sm-4 text-center">
              <img class="wow bounceInUp" src="assets/images/iphone_full.png" alt="" title="">
            </div>
            <div class="col-sm-4">
              <ul class="feature-list-right">
                <li>
                  <div class="feature-icon wow fadeInRight" data-wow-delay=".3s">
                    <i class="fa fa-arrows-alt"></i>
                  </div>
                  <div class="feature-detail wow fadeInRight" data-wow-delay=".4s">
                    <h4>Responsive support</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                </li>
                <li>
                  <div class="feature-icon wow fadeInRight" data-wow-delay=".3s">
                    <i class="fa fa-cog"></i>
                  </div>
                  <div class="feature-detail wow fadeInRight" data-wow-delay=".4s">
                    <h4>Tons of API callbacks</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                </li>
                <li>
                  <div class="feature-icon wow fadeInRight" data-wow-delay=".3s">
                    <i class="fa fa-mobile"></i>
                  </div>
                  <div class="feature-detail wow fadeInRight" data-wow-delay=".4s">
                    <h4>iOS / Surface / Android</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                </li>
                <li>
                  <div class="feature-icon wow fadeInRight" data-wow-delay=".3s">
                    <i class="fa fa-undo"></i>
                  </div>
                  <div class="feature-detail wow fadeInRight" data-wow-delay=".4s">
                    <h4>Auto-sliding</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
    </section>
    <!-- feature end -->

    <!-- description start -->
    <section id="description" class="description white">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <span class="sub-head wow fadeInLeft">think about</span>
            <div class="title wow fadeInRight">
              <h2>why GRAPE best</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 wow pulse" data-wow-delay=".5s">
            <img class="img-responsive" src="assets/images/iphone_half.png" alt="Why to choose us">
          </div>
          <div class="col-sm-6">
            <ul class="description-list">
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-bomb"></i></span>Nam nec tellus a odio tincidunt auctor a ornare odio</li>
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-paw"></i></span>Nam nec tellus a odio tincidunt</li>
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-birthday-cake"></i></span>Nam nec tellus a odio tincidunt auctor </li>
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-fire-extinguisher"></i></span>Nam nec tellus a odio </li>
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-magic"></i></span>Nam nec tellus a odio tincidunt auctor a ornare odio</li>
              <li class="wow fadeInRight"><span class="des-icon"><i class="fa fa-rebel"></i></span>Nam nec tellus a odio tincidunt auctor a ornare</li>
            </ul>
            <!-- /.description-list -->
          </div>
        </div>
      </div>
    </section>
    <!-- description end-->

    <!-- video start -->
    <section id="video" class="video solid-bg">
      <div class="video-container"><div id="player"></div><div class="video-mask"></div></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <div class="video-mask">
              <h2 class="wow bounceInDown">how it works</h2>
				<a href="https://vimeo.com/45830194" class="play wow rollIn animated"></a>
              <span class="wow bounceInUp">watch video</span>
            </div>            
          </div>
        </div>
      </div>
    </section>
    <!-- video end -->

    <!-- screenshot start -->
    <section id="screenshot" class="screenshot white">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <span class="sub-head wow fadeInLeft">take a look</span>            
            <div class="title wow fadeInRight">
              <h2>screenshots</h2>
            </div>
            <div id="owl-demo" class="owl-carousel">
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
                <div class="item screenshot-block">
                  <img src="./assets/images/screenshot.jpg" alt="GRAPE">
                  <div class="caption">
                    <a class="test-popup-link" href="./assets/images/screenshot.jpg"><i class="fa fa-plus"></i></a>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </section>
    <!-- screenshot end -->

    <!-- review start -->
    <section id="review" class="review solid-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <h2 class="wow swing">reviews</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 text-center">
            <div id="myCarousel1" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="active item">
                  <span class="review-img">
                     <img src="./assets/images/thumb-1.png" alt="image">
                   </span>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <span class="reviewer-name">Maria Jones</span>
                  <span class="review-comp">CEO, GRAPE Ltd.</span>
                </div>
                <div class="item">
                  <span class="review-img">
                     <img src="./assets/images/thumb-1.png" alt="image">
                   </span>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <span class="reviewer-name">Maria Jones</span>
                  <span class="review-comp">CEO, GRAPE Ltd.</span>
                </div>
                <div class="item">
                  <span class="review-img">
                     <img src="./assets/images/thumb-1.png" alt="image">
                   </span>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <span class="reviewer-name">Maria Jones</span>
                  <span class="review-comp">CEO, GRAPE Ltd.</span>
                </div>
              </div>
              <!-- Carousel nav -->
              <a class="carousel-control left" href="#myCarousel1" data-slide="prev"><i class="fa fa-angle-left"></i></a>
              <a class="carousel-control right" href="#myCarousel1" data-slide="next"><i class="fa fa-angle-right"></i></a>              
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- review end -->

    <!-- price start -->
    <section id="price" class="pricingtable-section white">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <span class="sub-head wow fadeInLeft">are you surrprised</span>            
            <div class="title wow fadeInRight">
              <h2>unbelievable price</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="1s">
            <div class="price-block">
              <div class="price-header">
                <h3>free plan</h3>
                <i class="fa fa-heart"></i>
              </div>
              <div class="price-plan">
                <ul>
                  <li>
                    <span class="price">$0.00</span>
                    <span class="month">/per month</span>
                  </li>
                  <li>Unlimited Space</li>
                  <li>Unlimited Database</li>
                  <li>Easy to Istall</li>
                  <li>Unlimited Subdomains</li>
                  <li>Dedicated Serer</li>
                  <li> <a href="" class="btn">sign up</a></li>
                </ul>
              </div>
            </div>
            <!-- /.price-block -->
          </div>
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="2s">
            <div class="price-block active">
              <div class="price-header">
                <h3>basic plan</h3>
                <i class="fa fa-cogs"></i>
              </div>
              <div class="price-plan">
                <ul>
                  <li>
                    <span class="price">$9.00</span>
                    <span class="month">/per month</span>
                  </li>
                  <li>Unlimited Space</li>
                  <li>Unlimited Database</li>
                  <li>Easy to Istall</li>
                  <li>Unlimited Subdomains</li>
                  <li>Dedicated Serer</li>
                  <li> <a href="" class="btn">sign up</a></li>
                </ul>
              </div>
            </div>
            <!-- /.price-block -->
          </div>
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="3s">
            <div class="price-block">
              <div class="price-header">
                <h3>developer plan</h3>
                <i class="fa fa-suitcase"></i>
              </div>
              <div class="price-plan">
                <ul>
                  <li>
                    <span class="price">$29.00</span>
                    <span class="month">/per month</span>
                  </li>
                  <li>Unlimited Space</li>
                  <li>Unlimited Database</li>
                  <li>Easy to Istall</li>
                  <li>Unlimited Subdomains</li>
                  <li>Dedicated Serer</li>
                  <li> <a href="" class="btn">sign up</a></li>
                </ul>
              </div>
            </div>
            <!-- /.price-block -->
          </div>
        </div>
      </div>
    </section>
    <!-- price end -->

    <!-- download start -->
    <section id="download" class="downlaod solid-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 text-center">
              <h2 class="wow swing">download</h2>
              <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
              <span class="wow fadeInLeft" style="display:inline-block"><a href="" class="btn"><i class="fa fa-apple"></i> app store</a></span>
              <span class="wow fadeInLeft" style="display:inline-block"><a href="" class="btn"><i class="fa fa-android"></i> play store</a></span>
              <span class="wow fadeInLeft" style="display:inline-block"><a href="" class="btn"><i class="fa fa-windows"></i> windows</a></span>
            </div>
          </div>
        </div>
    </section>
    <!-- download end -->

    <!-- support start -->
    <section id="support" class="support white">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <span class="sub-head wow fadeInLeft">stay close</span>
            <div class="title wow fadeInRight">
              <h2>help & support</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="1s">
            <div class="support-block">
              <span class="support-icon"><i class="fa fa-bitbucket"></i></span>
              <h3>Product Support</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
            </div>
          </div>
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="2s">
            <div class="support-block active">
              <span class="support-icon"><i class="fa fa-bullhorn"></i></span>
              <h3>Product Support</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
            </div>
          </div>
          <div class="col-sm-4 wow bounceInUp" data-wow-duration="3s">
            <div class="support-block">
              <span class="support-icon"><i class="fa fa-stethoscope"></i></span>
              <h3>Product Support</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- support end --> 

    <!-- subscription start -->
    <section id="subscription" class="subscription solid-bg">      
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2 class="wow swing">newsletter sign up</h2>
				<form class="newsletter-signup">
				  <p class="newsletter-success"></p>
				  <p class="newsletter-error"></p>
					<div class="input-group">              
					   <input type="email" name="email" placeholder="Enter Your Email Address" class="form-control wow fadeInLeft">
					  <span class="input-group-btn wow fadeInRight">
						<input type="submit" value="subscribe" class="btn btn-sub">
					  </span>                            
					</div><!-- /.input-group -->
               </form>
          </div>
        </div>
      </div>
    </section>
    <!-- subscription end -->

    <!-- contact start -->
    <section id="contact" class="contact white tab-content">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs text-center" role="tablist">
              <li class="wow rollIn animated" data-wow-duration="1s"><a href="#contact-info" role="tab" data-toggle="tab"><i class="fa fa-paper-plane"></i>
                </a></li>
              <li class="active wow rollIn animated" data-wow-duration="2s"><a href="#contact-form" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i></a></li>
              <li class="wow rollIn animated" data-wow-duration="3s"><a href="#contact-map" class="contact-map" role="tab" data-toggle="tab"><i class="fa fa-map-marker"></i></a></li>
            </ul>            
          </div>
        </div>
      </div>
       <!-- Tab panes -->            
      <div class="tab-content">
        <div class="tab-pane contact-info" id="contact-info">
          <div class="container">
            <div class="row">
            <div class="col-sm-12 text-center">            
              <span class="sub-head">we are here</span>
              <div class="title">
                <h2>get in touch</h2>
              </div>
            </div>
          </div>
            <div class="row text-center">
              <div class="col-sm-4">
                <div class="info-holder">
                  <i class="fa fa-taxi"></i>
                   <br>
                   <p>
                     14/4 <br>
                     Burnaby <br>
                     BC, Canada 
                   </p>
                </div>                
              </div>
              <div class="col-sm-4">
                <div class="info-holder">
                  <i class="fa fa-mobile"></i>
                  <br>
                  <p>+1778-885-0000
                  <br>
                  +1778-885-1111
                  <br>
                  +6698 55514 68
                  </p>
                </div>                
              </div>
              <div class="col-sm-4">
                <div class="info-holder">
                  <i class="fa fa-reply"></i>
                  <br>
                  <p>
                    info@domain.com
                    <br>
                    hello@gmail.com
                  </p>
                </div>                
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane active contact-info" id="contact-form">
          <div class="container">
            <div class="row">
              <div class="col-sm-12 text-center">            
                <span class="sub-head">we are here</span>
                <div class="title">
                  <h2>get in touch</h2>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <form class="form-horizontal" role="form">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <div class="span-form">
                        <input class="form-control" type="text" placeholder="First name" required="required">
                      </div>
                      <div class="span-form">
                        <input type="text" class="form-control" placeholder="Last name" required="required">
                      </div>
                    </div>
                    <div class="form-group">
                      <input type="email" class="form-control" placeholder="Email address" required="required">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Subject" required="required">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <textarea name="" class="form-control btn-block" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                      <input type="submit" class="btn btn-block" value="send message">
                    </div>
                  </div>
                  <div class="col-sm-12">
					<p class="contact-success">Your Message has been Successfully Sent!</p>
					<p class="contact-error">Error! Something went wrong!</p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane contact-info" id="contact-map">
          <div class="container">
            <div class="row">
              <div class="col-sm-12 text-center">            
                <span class="sub-head">we are here</span>
                <div class="title">
                  <h2>get in touch</h2>
                </div>
              </div>
            </div>
          </div>
          <div id="map">
            
          </div>
        </div>
      </div>  
    </section>
    <!-- contact end -->

    <!-- footer start -->
    <footer id="footer" class="solid-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <div class="social-icon">
             <a href="" class="wow rollIn animated" data-wow-delay=".1s"><i class="fa fa-facebook"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".2s"><i class="fa fa-twitter"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".3s"><i class="fa fa-google-plus"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".4s"><i class="fa fa-pinterest"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".5s"><i class="fa fa-rss"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".6s"><i class="fa fa-linkedin"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".7s"><i class="fa fa-vimeo-square"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".8s"><i class="fa fa-youtube-square"></i></a>
             <a href="" class="wow rollIn animated" data-wow-delay=".9s"><i class="fa fa-dribbble"></i></a>
            </div> 
            <div class="copyright">
              <p>&copy; <span>GRAPE</span>2015, all right reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
              <p>Design by <span>CodePassenger</span></p>
            </div>
          </div>
        </div>   
      </div> 
      <div id="go-to-top">
          <a href="#banner"></a>
      </div>
      <!--/.go-to-top end-->    
    </footer>
    <!-- footer end -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/smoothscroll.js"></script>
    <script src="assets/js/jquery.scrollTo.min.js"></script>
    <script src="assets/js/jquery.localScroll.min.js"></script>
    <script src="assets/js/jquery.nav.js"></script>
    <script src="assets/js/owl.carousel.js"></script>
    <script src="assets/js/jquery.magnific-popup.js"></script>
    <script src="assets/js/jquery.parallax.js"></script>
    <script src="assets/js/jquery.flexslider-min.js"></script>
    <script src="assets/js/jquery.ajaxchimp.min.js"></script>
    <script src="assets/js/matchMedia.js"></script>
    <script src="assets/js/script.js"></script>
    
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/easing.js"></script>
    
    <script>
    	$(document).ready(function() {
		//"use strict";
        $('#banner').parallax("50%", 0.5, true);
    		$('#feature').parallax("50%", 0.5, true);
    		$('#subscription').parallax("50%", 0.5, true);
    		$('#review').parallax("50%", 0.5, true);
    		$('#download').parallax("50%", 0.5, true);
        $('#footer').parallax("50%", 0.5, true);
    	});

    </script>

    
  </body>
</html>